<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 菜单</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        .recipe-card {
            transition: transform 0.3s;
        }
        .recipe-card:hover {
            transform: translateY(-5px);
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        
        /* 自定义复选框样式 */
        .custom-checkbox {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 2px solid #FF9AA2;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .custom-checkbox input:checked ~ .checkmark {
            background-color: #FF9AA2;
        }
        
        .custom-checkbox input:checked ~ .checkmark:after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-gray-800">菜单</h1>
            <div class="w-6"></div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-20 pb-24">
        <!-- 菜单标签页 -->
        <div class="flex mb-6">
            <button class="tab-button active flex-1 py-2 text-center font-bold text-primary border-b-2 border-primary">
                今日菜单
            </button>
            <button class="tab-button flex-1 py-2 text-center font-bold text-gray-600 border-b-2 border-gray-200">
                本周菜单
            </button>
            <button class="tab-button flex-1 py-2 text-center font-bold text-gray-600 border-b-2 border-gray-200">
                购物清单
            </button>
        </div>

        <!-- 今日菜单内容 -->
        <div id="todayMenu" class="tab-content active">
            <!-- 添加菜谱按钮 -->
            <div class="glass-effect rounded-xl p-4 mb-6 flex items-center justify-center">
                <button class="flex items-center text-primary">
                    <i class="fas fa-plus-circle text-xl mr-2"></i>
                    <span>添加菜谱到今日菜单</span>
                </button>
            </div>

            <!-- 早餐 -->
            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">早餐</h2>
                <div class="glass-effect rounded-xl overflow-hidden">
                    <div class="flex items-center p-3">
                        <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-800">健康早餐碗</h3>
                            <p class="text-gray-600 text-xs">营养均衡，能量满满</p>
                            <p class="text-gray-500 text-sm mt-1 flex items-center">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span>添加人: <span class="text-primary font-medium">小厨师</span></span>
                            </p>
                        </div>
                        <div class="flex">
                            <a href="cook.html" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-utensils text-white text-sm"></i>
                            </a>
                            <button class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
                                <i class="fas fa-times text-white text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 午餐 -->
            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">午餐</h2>
                <div class="glass-effect rounded-xl overflow-hidden">
                    <div class="flex items-center p-3">
                        <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-800">意大利面</h3>
                            <p class="text-gray-600 text-xs">简单美味，快速料理</p>
                            <p class="text-gray-500 text-sm mt-1 flex items-center">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span>添加人: <span class="text-primary font-medium">美食家</span></span>
                            </p>
                        </div>
                        <div class="flex">
                            <a href="cook.html" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-utensils text-white text-sm"></i>
                            </a>
                            <button class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
                                <i class="fas fa-times text-white text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 晚餐 -->
            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">晚餐</h2>
                <div class="glass-effect rounded-xl overflow-hidden">
                    <div class="flex items-center p-3">
                        <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-800">香煎鸡胸肉</h3>
                            <p class="text-gray-600 text-xs">低脂高蛋白，健身必备</p>
                            <p class="text-gray-500 text-sm mt-1 flex items-center">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span>添加人: <span class="text-primary font-medium">小厨师</span></span>
                            </p>
                        </div>
                        <div class="flex">
                            <a href="cook.html" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-utensils text-white text-sm"></i>
                            </a>
                            <button class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
                                <i class="fas fa-times text-white text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 一键生成购物清单按钮 -->
            <div class="glass-effect rounded-xl p-4 flex items-center justify-center">
                <button class="flex items-center text-primary" id="generateShoppingList">
                    <i class="fas fa-shopping-cart text-xl mr-2"></i>
                    <span>一键生成购物清单</span>
                </button>
            </div>
        </div>

        <!-- 本周菜单内容 -->
        <div id="weekMenu" class="tab-content">
            <div class="glass-effect rounded-xl p-6 text-center">
                <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-calendar-week text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-2">规划本周菜单</h3>
                <p class="text-gray-600 text-sm mb-4">提前规划一周的菜单，让烹饪更有计划</p>
                <button class="py-2 px-4 bg-primary text-white rounded-lg">开始规划</button>
            </div>
            
            <!-- 本周菜单示例 -->
            <div class="mt-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">周一</h2>
                <div class="glass-effect rounded-xl overflow-hidden">
                    <div class="flex items-center p-3">
                        <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-800">彩虹沙拉</h3>
                            <p class="text-gray-600 text-xs">色彩缤纷，营养丰富</p>
                            <p class="text-gray-500 text-sm mt-1 flex items-center">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span>添加人: <span class="text-primary font-medium">美食家</span></span>
                            </p>
                        </div>
                        <div class="flex">
                            <a href="cook.html" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-utensils text-white text-sm"></i>
                            </a>
                            <button class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
                                <i class="fas fa-times text-white text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">周二</h2>
                <div class="glass-effect rounded-xl overflow-hidden">
                    <div class="flex items-center p-3">
                        <div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="菜谱" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-800">牛肉汉堡</h3>
                            <p class="text-gray-600 text-xs">美味多汁，家庭最爱</p>
                            <p class="text-gray-500 text-sm mt-1 flex items-center">
                                <i class="fas fa-user-circle text-primary mr-1"></i>
                                <span>添加人: <span class="text-primary font-medium">小厨师</span></span>
                            </p>
                        </div>
                        <div class="flex">
                            <a href="cook.html" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2">
                                <i class="fas fa-utensils text-white text-sm"></i>
                            </a>
                            <button class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
                                <i class="fas fa-times text-white text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 购物清单内容 -->
        <div id="shoppingList" class="tab-content">
            <!-- 添加食材按钮 -->
            <div class="glass-effect rounded-xl p-4 mb-6 flex items-center justify-center">
                <button class="flex items-center text-primary">
                    <i class="fas fa-plus-circle text-xl mr-2"></i>
                    <span>添加食材到购物清单</span>
                </button>
            </div>

            <!-- 食材分类 -->
            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">蔬菜</h2>
                <div class="glass-effect rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">西兰花</span>
                        </div>
                        <span class="text-gray-600 text-sm">200g</span>
                    </div>
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">胡萝卜</span>
                        </div>
                        <span class="text-gray-600 text-sm">2根</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">生菜</span>
                        </div>
                        <span class="text-gray-600 text-sm">1份</span>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">肉类</h2>
                <div class="glass-effect rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">鸡胸肉</span>
                        </div>
                        <span class="text-gray-600 text-sm">300g</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">三文鱼</span>
                        </div>
                        <span class="text-gray-600 text-sm">200g</span>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h2 class="text-lg font-bold text-gray-800 mb-3">调味料</h2>
                <div class="glass-effect rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">橄榄油</span>
                        </div>
                        <span class="text-gray-600 text-sm">1瓶</span>
                    </div>
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">盐</span>
                        </div>
                        <span class="text-gray-600 text-sm">1包</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <label class="custom-checkbox">
                                <input type="checkbox" class="hidden">
                                <span class="checkmark"></span>
                            </label>
                            <span class="text-gray-700 ml-3">黑胡椒</span>
                        </div>
                        <span class="text-gray-600 text-sm">1瓶</span>
                    </div>
                </div>
            </div>

            <!-- 一键清空购物清单按钮 -->
            <div class="glass-effect rounded-xl p-4 flex items-center justify-center">
                <button class="flex items-center text-red-500">
                    <i class="fas fa-trash-alt text-xl mr-2"></i>
                    <span>一键清空购物清单</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-2 px-4 flex justify-around items-center shadow-sm">
        <a href="index.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
        </a>
        <a href="menu.html" class="nav-tab active flex flex-col items-center">
            <i class="fas fa-list text-xl"></i>
            <span class="text-xs mt-1">菜单</span>
        </a>
        <a href="profile.html" class="nav-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>

    <script>
        // 标签页切换功能
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // 移除所有按钮的active类
                tabButtons.forEach(btn => {
                    btn.classList.remove('active', 'text-primary', 'border-primary');
                    btn.classList.add('text-gray-600', 'border-gray-200');
                });

                // 添加当前按钮的active类
                button.classList.add('active', 'text-primary', 'border-primary');
                button.classList.remove('text-gray-600', 'border-gray-200');

                // 隐藏所有内容
                tabContents.forEach(content => {
                    content.classList.remove('active');
                });

                // 显示当前内容
                tabContents[index].classList.add('active');
            });
        });
        
        // 一键生成购物清单按钮点击事件
        document.getElementById('generateShoppingList').addEventListener('click', function() {
            // 切换到购物清单标签页
            tabButtons.forEach((btn, i) => {
                if (btn.textContent.trim() === '购物清单') {
                    btn.click();
                }
            });
        });
    </script>
</body>
</html> 